<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>热力图展示</title>

  <link rel="stylesheet" href="/arcgis_js_api/library/4.15/esri/themes/light/main.css" />
  <script src="/arcgis_js_api/library/4.15/init.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #btn {
      width: 90px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      position: absolute;
      top: 100px;
      left: 100px;
      cursor: pointer;
      background: red;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/geometry/SpatialReference",
      "esri/Graphic"
    ], function (Map, MapView, FeatureLayer, SpatialReference, Graphic) {
      const EsriNameSpace = {
        Map,
        MapView,
        FeatureLayer,
        SpatialReference,
        Graphic
      }

      const map = new Map({
        basemap: "topo"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [121.049, 30.485],
        zoom: 5
      });

      this.map = map

      // 获取json数据，添加热力图
      this.getJsonData(EsriNameSpace, map, "/assets/json/heatMapData.json")
    });

    /**
      * 添加热力图的geometry
      * EsriNameSpace ：自定义的esri API内所需的类对象
      * geometry ：通过数据创建的geometry
      * Layer ：需要添加geometry的图层
      * attributes ：图层的属性值（需要包含热力图渲染的字段名称，和fields、field对应【如：num】）
   */
    function addFeature(EsriNameSpace, geometry, Layer, attributes) {
      const addFeature = EsriNameSpace.Graphic({
        geometry: geometry,
        attributes: attributes,
      })
      Layer.applyEdits({
        addFeatures: [addFeature],
      })
    }

    /**
     * 创建热力图图层
     * EsriNameSpace ：自定义的esri API内所需的类对象
     * layerVisible ：图层的可见性（true/false）
     */
    function createHeatMapFeatureLayer(EsriNameSpace, layerVisible) {
      return EsriNameSpace.FeatureLayer({
        objectIdField: 'ObjectID',
        source: [],
        outFields: '*',
        geometryType: 'point',
        visible: layerVisible,
        copyright: 'ZG',
        title: 'HeatMap',
        id: 'HeatMap',
        fields: [
          {
            alias: 'name',
            name: 'name',
            type: 'string',
          },
          {
            alias: 'num',
            name: 'num',
            type: 'oid',
          },
        ],
        renderer: {
          type: 'heatmap',
          field: 'num',
          blurRadius: 20,
          colorStops: [
            { ratio: 0, color: 'rgba(0, 126, 255, 0)' },
            { ratio: 0.3, color: '#38C500' },
            { ratio: 0.5, color: '#FCFF00' },
            { ratio: 0.8, color: '#FF6C00' },
            { ratio: 1, color: '#FF0000' },
          ],
          minPixelIntensity: 0,
          maxPixelIntensity: 200,
        },
      })
    }

    // 获取json数据，添加热力图数据
    function getJsonData(EsriNameSpace, map, jsonUrl) {
      $.getJSON(jsonUrl, (response) => {
        console.log("JSON数据获取正常")
        console.log(response)

        const heatMapFeatureLayer = this.createHeatMapFeatureLayer(EsriNameSpace, true)
        // 添加图层到map
        map.add(heatMapFeatureLayer)
        // 遍历json,创建geometry，并添加到heatMapFeatureLayer里面
        const pointData = response.features
        pointData.forEach((item) => {
          const coord = item.geometry.coordinates
          const pointItem = {
            type: 'point',
            latitude: coord[1],
            longitude: coord[0]
          }
          this.addFeature(EsriNameSpace, pointItem, heatMapFeatureLayer, item.properties)
        })
      })
    }

    //  控制图层的展示隐藏
    function showLayer() {
      this.map.findLayerById("HeatMap").visible = !this.map.findLayerById("HeatMap").visible
      console.log("当前的图层可见性：" + this.map.findLayerById("HeatMap").visible);
    }
  </script>
</head>

<body>
  <div id="viewDiv">
    <div id="btn" onclick="showLayer()">展示/隐藏</div>
  </div>

</body>

</html>